<template>
    <el-row justify="space-between">
      <el-col :span="16" class="flex-col">
        <h3>{{ title }}</h3>
      </el-col>
      <el-col :span="8" class="flex-col">
        <slot name="right"></slot>
      </el-col>
    </el-row>
    <span class="description">{{ description }}</span>
  </template>
<script setup>
import { ref, defineEmits } from 'vue'
import { Plus } from '@element-plus/icons-vue'
const emit = defineEmits(['add'])
const props = defineProps({
    title: {
        type: String,
        required: true,
        default: '编辑公司信息'
    },
    description: {
        type: String,
        required: true,
        default: '完善主页信息，让用户更快了解您的企业'
    }
})
const handleAdd = () => {
    console.log('新增')
    emit('add')
}
</script>
<style lang="scss" scoped>
// .flex-col {
//   display: flex;
//   align-items: center;  /* 垂直居中 */
//   /* 或者使用其他值：
//     align-items: flex-start;  顶部对齐
//     align-items: flex-end;    底部对齐
//   */
//   //min-height: 30px;  /* 设置一个最小高度 */
// }
// h3 {
//     font-size: 16px;
//     font-weight: 600;
//     color: #333;
// }

// .description {
//     font-size: 14px;
//     color: #666;
// }
</style>